<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Glowing Input Fields - 具有焦点亮度效果的文本框</title>
<style type="text/css">
	.w {
		width: 900px;
		margin: 0 auto;
		margin-bottom: 40px;
	}
	.formwrap { display: block; margin-bottom: 15px; }
	.formwrap label { 
		display: inline-block; 
		width: 80px; 
		font-size: 11px; 
		font-weight: bold; 
		color: #444; 
		font-family: Arial, Tahoma, sans-serif; 
	}
	
	.formwrap .shadowfield {
		position: relative;
		width: 250px;
		font-size: 17px;
		font-family: "Helvetica Neue", Arial, sans-serif;
		font-weight: normal;
		background: #f7f8f8;
		color: #7c7c7c;
		line-height: 1.4;
		padding: 6px 12px;
		outline: none;
		transition: all 0.2s ease-in-out 0s;
		-webkit-transition: all 0.2s ease-in-out 0s;
		-moz-transition: all 0.2s ease-in-out 0s;
		border: 1px solid #ad9c9c;
		border-radius: 6px 6px 6px 6px;
		box-shadow: 0 1px rgba(34, 25, 25, 0.2) inset, 0 1px #fff;
	}
	.formwrap .shadowfield:focus {
		border-color: #930; 
		background: #fff;
		color: #5d5d5d;
		box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); 
		-moz-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5); 
		-webkit-box-shadow: inset 0 1px rgba(34, 25, 25, 0.2), 0 1px rgba(255, 255, 255, 0.6), 0 0 7px rgba(235, 82, 82, 0.5);
	}
</style>
</head>
<body screen_capture_injected="true">
	<div class="w">
		<h1>#09 Glowing Input Fields</h1>
			<div class="formwrap">
		    <label for="email">Email</label>
		    <input type="text" name="email" id="email" placeholder="" class="shadowfield">
		  </div>
		
		<div class="formwrap">
		  <label for="password">Password</label>
		  <input type="password" name="password" id="password" placeholder="" class="shadowfield">
		</div>
	</div>
</body>
</html>